<template>
	<div class="promo_code">
		<van-popup v-model:show="show" style="background: none">
			<main>
				<header>
					<div>
						<img :src="posterImgPath" />
						<img class="close" src="@/assets/img/close_icon.png" @click="show = false" />
					</div>
				</header>

				 <div class="btns">
					<div @click="jump(1)">
						<img src="@/assets/img/my/img_icon.png" />
						<span>保存海报</span>
					</div>
					<div @click="jump(2)">
						<img src="@/assets/img/my/img_icon.png" />
						<span>保存二维码</span>
					</div>
				</div>
			</main>
		</van-popup>
	</div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import { computed } from 'vue';

const router = useRouter();
const emits = defineEmits<{
	(event: 'update:show'): void;
}>();

const props = defineProps<{
	posterImgPath: string;
	show: boolean;
}>();

const show = computed<boolean>({
	get() {
		return props.show;
	},
	set() {
		emits('update:show');
	}
});

const jump = (i:number) => {
  router.push({ name:'poster', query: { type: i } });
  return false;
}
</script>

<style lang="scss" scoped>
.promo_code {
	main {
		position: relative;
		width: 100vw;
		height: 100vh;

		header {
			position: absolute;
			top: 12%;
			left: 50%;
			transform: translateX(-50%);

			div {
				@include flx-direction-center;
				img {
					width: 85vw;
					height: 60vh;
					object-fit: contain;
				}
				.close {
					width: 25px;
					height: 25px;
					margin-top: 25px;
				}
			}
		}

		.btns {
			@include flx-justify-between;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 80px;
			padding-bottom: env(safe-area-inset-bottom);
			border-radius: 20px 20px 0px 0px;
			background: white;
			div {
				@include flx-center;
				flex: 1;
				height: 100%;
				color: #1a1a1a;
				font-size: 15px;
				img {
					width: 20px;
					height: 20px;
					margin-right: 10px;
				}
			}
		}
	}
}
</style>
